import React from "react";
import "./optionitem.less";
import imgCk from "@/assets/images/user/choice_me.png";

interface IOptionItemPorps {
  data: ISelectQSType;
  // 还需要从父组件传递一个是否选中进来item里面来
  isCheck: boolean;
  // 当选项被点击时的回调
  onClick: (key: string) => void;
}

export default function OptionItem({
  data,
  isCheck,
  onClick,
}: IOptionItemPorps) {
  return (
    <div className="opt-item flex ver-center" onClick={() => onClick(data.key)}>
      <div className="check">
        <img
          style={{ display: isCheck ? "block" : "none" }}
          src={imgCk}
          alt=""
        />
      </div>
      <div className="opt-content flex">
        <div className="sort">{data.key}</div>
        <span>&nbsp;.&nbsp;</span>
        <div>{data.value}</div>
      </div>
    </div>
  );
}
